<template>
    <view :prop="info" :change:prop="sse.onChange" id="renderjs-view" />
</template>

<script>
	import { ACCESS_TOKEN } from '@/store/mutation-types'
	import storage from '@/utils/storage'
	export default {
		name:"eventSource",
		data() {
			return {
				 info: {}
			};
		},
		created() {
			this.setInfo()
		},
		methods: {
			setInfo() {
				this.info = { token:  storage.get(ACCESS_TOKEN)}
			},
			onMessage(e) {
				this.$emit('message', e)
			}
		}
	}
</script>

<script module="sse" lang="renderjs">
	export default {
		data() {
			return { 
				sseInfo:{}
			}
		},
		mounted() {
			this.setSSE()
		},
		methods: {
			setSSE() {
				if (typeof EventSourcePolyfill === "function") {
					this.initSSE()
				} else {
					const script = document.createElement('script')
					script.src = "static/js/eventsource.min.js"
					script.type = "text/javascript"
					script.onload = this.initSSE.bind(this)
					document.head.appendChild(script)
				}
			},
			initSSE() {
				const sse =  new EventSourcePolyfill('http://10.189.88.153:8001/api/sse/dashboard', {
					headers: {
						Authorization: this.sseInfo.token
					}
				})
				sse.onmessage = (e) => {
					const parsedData = JSON.parse(e.data)
					console.log(parsedData)
				}
			},
			onChange(value) {
				this.sseInfo = value
			},
		}
	}
</script>

<style lang="scss">

</style>